<template>
  <view class="icon" :class="typeStyle" @click="$emit('click')"></view>
</template>

<script>
export default {
  props: ['types'],
  data() {
    return {};
  },
  computed: {
    typeStyle() {
      switch (+this.types) {
        case 2:
          return "type2";
        case 3:
          return "type3";
        default:
          return "type1";
      }
    },
  },
  methods: {},

  created() {},
};
</script>
<style lang="scss" scoped>
.icon {
  width: 88rpx;
  height:88rpx;
  border-radius: 50%;
  background: #f2f4f9;

  overflow: hidden;
  position: relative;
  &::before {
    content: "+";
    display: inline-block;
    width: 88rpx;
    height: 88rpx;
    text-align: center;
    line-height: 80rpx;
    position: absolute;
    left: 0;
    top: 0;
    z-index: 1;
    width: 100%;
    height: 100%;
    color: #4275fd;
    font-size: 52rpx;
  }
  &.type1 {
    opacity: 0.4;
  }
  &.type2 {
    opacity: 1;
  }
  &.type3 {
    opacity: 1;
    background: #4275fd;
    &::before {
      content: "...";
      line-height: 54rpx;
      color: #fff;
    }
  }
}
</style>
